<template>
    <div id="app" >
        <transition name="fade" mode="out-in">
            <myHeader v-show="showHeader" :isUser="isUser"></myHeader>
        </transition>
        <router-view/>
    </div>
</template>

<script>
import myHeader from './components/head'; 
export default {
  data(){
      return{
          isIndex:false,
          isUser:false,
          showHeader:true,
          lastOffset:0
      }
  },
  components:{
      myHeader
  },
  mounted(){
      //初始化
    if(this.$route.path=='/'){
        this.isIndex=true
        this.showHeader=false
    }
    //监测滚动条
    window.addEventListener("scroll",e=>{
        if(this.$route.path!='/'){
            var t =document.documentElement.scrollTop||document.body.scrollTop;
            if(t==0){
                this.showHeader=true
            }else if(t>this.lastOffset){
                this.showHeader=false
            }else{
                this.showHeader=true
            }
            this.lastOffset=t
        }
    });
    
  },
  watch:{
      "$route":function(){
          if(this.$route.path=='/'){
              this.showHeader=false
          }else{
              this.showHeader=true
              if(localStorage.getItem("Booktoken")){
                this.isUser=true
              }else this.isUser=false
          }
      },
  }
}
</script>

<style scoped>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .25s ease;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
</style>

